<template>
	<div class="data-left">
		<ul class="data-left_ul">
			<li class="data-left_li" v-for="(item,index) in arrList" :key="index">
				<div class="api-menu1">
					<div class="menu1-icon1" :class="{'menu1-icon1_active':item.isEnable==true}" @click="iconTab(index)"><i class="el-icon-caret-right"></i></div>
					<div class="menu1-icon2" @click="iconTab(index)">
						<i class="el-icon-folder" v-if="item.isEnable==false"></i>
						<i class="el-icon-folder-opened" v-else></i>
					</div>
					<div class="menu1-text" @click="iconTab(index)">{{item.name}}</div>
				</div>
				<ul class="api-menu2" v-if="item.isEnable">
					<li class="api-menu2_li" v-for="(cItem,cIndex) in item.children" :key="cIndex">
						<div class="menu2_li-ask ask_1" v-if="cItem.type=='GET'">GET</div>
						<div class="menu2_li-ask ask_2" v-else-if="cItem.type=='POST'">POST</div>
						<div class="menu2_li-ask ask_3" v-else-if="cItem.type=='PUT'">PUT</div>
						<div class="menu2_li-ask ask_4" v-else-if="cItem.type=='DELETE'">DELETE</div>
						<div class="menu2_li-text" @click="menuTab(cItem)">{{getName(cItem)}}</div>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>
<script>
	import ala from '@/service/ala'
	import menuJson from './menu.json'
	export default {
		data() {
			return {
				arrList: menuJson
			}
		},
		created() {
			this.init()
		},
		methods: {
			async init() {
				let result = await ala.httpGet('api/table/querylist')
				for (let j = 0; j < result.length; j++) {
					result[j].value = this.getName(result[j])
					let fineItem = this.arrList.find(r => r.tableType === result[j].tableType)
					fineItem.children.push(result[j])
				}
				this.getCollect()
				if (this.$route.query.type) {
					this.circulation(result)
				} else {
					this.menuTab(this.arrList[1].children[0])
				}
				this.$emit('change', result)
			},
			circulation(vData) {
				var this_ = this
				vData.forEach((state) => {
					if (state.key.toLowerCase() === this_.$route.query.type.toLowerCase()) {
						this_.$emit('apiChang', state)
					}
				})
			},
			async iconTab(vIndex) {
				this.$set(this.arrList[vIndex], 'isEnable', !this.arrList[vIndex].isEnable)
			},
			async menuTab(val) {
				this.$emit('apiChang', val)
			},
			async getCollect() {
				this.arrList[0].children = await ala.httpGet('api/DevelopCollect/QueryList?way=1')
			},
			getName(item) {
				if (item.name) {
					if (item.name === item.key) return item.name
					else {
						return `${item.name}(${item.key})`
					}
				} else {
					return item.key
				}
			}
		}
	}
</script>
<style lang="scss">
	@import "./data-left.scss";
</style>